<template>
	<EmpireCard>
		<template #title>
			<view class="empire-mall__flex">
				<iamge class="product-image" :src="logo"></iamge>
				<text>{{ name }}</text>
			</view>
		</template>
		<EmpireImageHorizontal :src="src" :title="title">
			<template #subTitle>
				<text>规格：{{ spec }}</text>
			</template>
			<view class="">
				<text>¥{{ price }}</text>
				<uni-number-box v-model="number" :min="1"></uni-number-box>
			</view>
		</EmpireImageHorizontal>
	</EmpireCard>
</template>

<script setup>
import EmpireCard from '@/components/empire-card/index.vue';
import EmpireImageHorizontal from '@/components/empire-image/empire-image-horizontal.vue';
import { ref } from 'vue';

defineProps({
	src: {
		type: String,
		defaut: undefined
	},
	logo: {
		type: String,
		defaut: undefined
	},
	name: {
		type: String,
		defaut: undefined
	},
	title: {
		type: String,
		defaut: undefined
	},
	spec: {
		type: String,
		defaut: undefined
	},
	price: {
		type: Number,
		defaut: undefined
	}
});

const number = ref(1);
</script>

<style lang="scss" scoped>
.product-image {
	width: 48rpx;
	height: 48rpx;
}
</style>
